<template>
    <div class="question_tab1">
      <div class="ques_list">
        <div class="item" v-for="(item,index) in quesclass" :key="index" @click="classDetail(item.id)">
          <div class="left">
            <div class="ques_img">
            <img :src="$store.state.domain+item.icon" alt="">
            </div>
            <div class="info">
              <h6>{{item.category_name}}</h6>
              <p>{{item.content}}</p>
            </div>
          </div>
          <div class="right">
            <span @click="goques(item.id,$event)">提问</span>
          </div>
        </div>
      </div>
      <div class="class_ques_list" v-for="(value,key,tindex) in queslist" :key="tindex">
        <div class="ques_title">
          <span>{{value.title}}</span>
          <em @click="moreQuestionlist(key)">查看更多></em>
        </div>
        <div class="list">
          <ques-item  v-for="(quesitem,qindex) in value.question" :key="qindex" :item="quesitem"></ques-item>
        </div>
        
      </div>
    </div>
</template>
<script>
import quesItem from "@/components/quesItem";

export default {
    data(){
	  return{
      quesclass:[],
      questype:[1,2,3],
      queslist:{1:'',2:'',3:''}

    }
  },
  components:{
    quesItem
  },
  created(){
    this.getServersclass();
    this.getTypelist();
  },
  methods:{
    getServersclass(){
      this.$http.fetchGet("getFqCatList", {
        limit: 4
      }).then(({ data }) => {
        this.quesclass = data;
      });
    },
    getTypelist(){
      for(var i in this.questype){
        this.getqueslist(this.questype[i]);
      }
    },
    getqueslist(type){
      this.$http.fetchGet("getFlashList", {
        fqPromoteType:type,
        offset:0,
        limit: 3
      }).then(({ data }) => {
        this.queslist[type] = data;
      });
    },
    classDetail(cid){
      this.$router.push({
				path: '/servicesdetail',
				query: {
					cid: cid
				}
			})
    },
    goques(cid,event){
      event.cancelBubble = true;
      this.$router.push({
				path: '/selectques',
				query: {
					cid: cid
				}
			})
    },
    moreQuestionlist(fqtype){
      //查看更多
      this.$router.push({
				path: '/questionlist',
				query: {
					fqPromoteType: fqtype
				}
			})
    }
  }
}
</script>
<style scoped lang="less">
.tit{
  font-size: .4rem;
  color: #333333;
  font-weight: normal;
}
  .ques_list{
    .item{
      .h(170);
      padding-left: .266667rem;
      padding-right: .506667rem;
      .flex();
      .justify-content(space-between);
      .align-items(center);
      padding: .506667rem .4rem .506667rem .213333rem ;
      box-sizing: border-box;
      border-bottom:1px solid #F2F2F2;
      &:last-child{
        border-bottom: none;
      }
      .left{
        .flex();
        .justify-content(flex-start);
      }
      .ques_img{
        width: 1.253333rem;
        height: 1.253333rem;
        border-radius: 50%;
        overflow: hidden;
        margin-right: .253333rem;
        img{
          width: 100%
        }                      
      }
      .info{
        h6{
          color: #333;
          font-size: .4rem;
          line-height: .7rem;
          font-weight: normal;
          overflow: hidden;
          white-space: nowrap;
          text-overflow:ellipsis;
        }
        p{
          font-size: .32rem;
          color: #666;
          overflow: hidden;
          white-space: nowrap;
          text-overflow:ellipsis;
        }
      }
      .right{
        span{
          display: block;
          width: 1.546667rem;
          height:.746667rem;
          line-height: .666667rem;
          text-align: center;
          color: #189BEB;
          border: 1px solid #189BEB;
          box-sizing: border-box; 
          border-radius: .133333rem;
        }
      }
    }
  }
.class_ques_list{
    border-top: .266667rem solid #F2F2F2;
    .ques_title{
      height: 1.2rem;
      line-height: 1.2rem;
      padding-left: .266667rem;
      padding-right: .506667rem;
      box-sizing: border-box;
      .flex;
      .justify-content(space-between);
      .align-items(center);
      span{
        font-size: .4rem;
        height: .4rem;
        line-height: .4rem;
        color: #333;
        border-left: .053333rem solid #189BEB;
        padding-left: .106667rem;
      }
      em{
        font-size: .293333rem;
        color: #189BEB;
        font-style: normal;
      }
    }
}
</style>


